<template>
  <div class="element-container">
    <div 
    v-for="(element, index) in elements" 
    :key="index" 
    class="item margin-left clearfix"
    :class="{'item-margin-top': index >= 3, 'active': index + 1 == active}"
    draggable="true"
    @dragstart="e => dragstartHandler(e, element)"
    @click="e => checkElement(e, element, index)"
    
    >
      <div class="icon-box">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="element.icon"></use>
        </svg>
      </div>
      <div class="text">{{element.name}}</div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import basicElements from '../assets/basicElements'

export default {
  name: 'Element',
  props: {
    msg: String
  },
  components: {
  },
  created(){
    this.select(basicElements[0])
  },
  data() {
    return {
      elements: basicElements,
      active: 1
    }
  },
  methods: {
      ...mapMutations([
        'select'
      ]),
      dragstartHandler(e, element) {
          e.dataTransfer.dropEffect = 'copy'
          e.dataTransfer.effectAllowed = 'all'
          e.dataTransfer.setData('text/plain', JSON.stringify(this.initItem(element)))
      },
      initItem (item) {
        return { zIndex: 'auto', top: 0, left: 0, bottom: 'auto', right: 'auto', ...item }
      },
      checkElement(e, element, index) {
        this.select(element)
        this.active = index + 1;
        
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  fill: currentColor;
  overflow: hidden;
}
.element-container {
    float: left;
    width: 200px;
    height: 100%;
}
.item {
  float: left;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  /* border: 1px solid transparent; */
}
.item-margin-top {
  margin-top: 30px;
}
.icon-box {
  width: 50px;
  height: 50px;
  /* border: 1px solid #eeeeee; */
}
.margin-left {
  margin-left: 10px;
}
.active {
  /* border: 1px solid #eeeeee; */
  background: #eeeeee;
}
</style>
